<template>
	<template v-if="isAlready">
		<div class="dragWidgetClass"
			 :style="'width:'+widget.props.width+widget.props.widthUnit+';height:'+widget.props.height+widget.props.heightUnit+';'">
			<div v-if="widget.props.visible" style="width: 100%;float: left;">
				<drag-widget :model="model" :widgets="widgets" :widget="widget" drag></drag-widget>
			</div>
			<div class="widgetHeader">
				<div class="widgetHeaderTitle">
					组件名称：{{ widget.name }}
				</div>
				<div class="widgetHeaderButton">
					<div style="float:left;margin-right: 5px;">

					</div>
					<el-icon @click='dblClick' style="margin-right: 5px;">
						<component is="el-icon-setting"></component>
					</el-icon>
					<el-icon @click='copyWidget' style="margin-right: 5px;">
						<component is="el-icon-copy-document"></component>
					</el-icon>
					<el-icon @click='removeWidget'>
						<component is="el-icon-close"></component>
					</el-icon>
				</div>
			</div>

			<div class="innerDrawer">
				<el-drawer v-model="widget.drawerModel" size="130px;" direction="btt" :withHeader="false"
						   style="position: absolute;z-index: -1;">
					<el-form label-width="100" label-position="right" style="padding: 10px 10px 0 10px;" size="small">
						<el-row>

							<el-col :span="6" class="colClass">
								<el-form-item label="组件名称">
									<el-input v-model="widget.name" clearable style="width: 150px;"></el-input>
									<el-switch
										v-model="widget.props.showName"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
										:active-value="true"
										:inactive-value="false">
									</el-switch>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="固定宽度">
									<el-input-number v-model="widget.props.width" controls-position="right"
													 placeholder="可调整宽度"/>
									<el-select v-model="widget.props.widthUnit" style="width: 75px;">
										<el-option label="百分比" value="%"/>
										<el-option label="像素" value="px"/>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="固定高度">
									<el-input-number v-model="widget.props.height" controls-position="right"
													 :readonly="heightReadonly" placeholder="可调整高度"/>
									<el-select v-model="widget.props.heightUnit" style="width: 75px;"
											   @change="heightUnitChange">
										<el-option label="自动" value="auto"/>
										<el-option label="百分比" value="%"/>
										<el-option label="像素" value="px"/>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<div style="float: left;">
									<el-form-item label="显示边框">
										<el-switch
											v-model="widget.props.border"
											style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
											:active-value="1"
											:inactive-value="0">
										</el-switch>
									</el-form-item>
								</div>
								<div style="float: left;">
									<el-form-item label="可关闭">
										<el-switch
											v-model="widget.props.closeable"
											style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
											:active-value="true"
											:inactive-value="false">
										</el-switch>
									</el-form-item>
								</div>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="阴影效果">
									<el-select v-model="widget.props.shadow" style="width: 100px;">
										<el-option label="显示" value="always"/>
										<el-option label="移入显示" value="hover"/>
										<el-option label="不显示" value="never"/>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="占用列">
									<el-input-number v-model="widget.props.colSpan" :min="0"
													 :max="24"></el-input-number>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="控件尺寸">
									<ex-select v-model="widget.props.widgetSize" dict-code="WIDGET_SIZE"
											   placeholder="请选择"></ex-select>
								</el-form-item>
							</el-col>

							<el-col :span="6">
								<el-form-item label="标签宽度">
									<el-input-number v-model="widget.props.labelWidth"></el-input-number>
								</el-form-item>
							</el-col>

							<el-col :span="6">
								<el-form-item label="标签位置">
									<el-select v-model="widget.props.labelPosition" style="width: 100px;">
										<el-option label="居左" value="left"/>
										<el-option label="居右" value="right"/>
									</el-select>
								</el-form-item>
							</el-col>

							<!--            <el-col :span="6">-->
							<!--              <el-form-item label="数据源">-->
							<!--                <el-input v-model="widget.props.serviceName" style="width: 80px;"></el-input>-->
							<!--                <el-input v-model="widget.props.moduleName"  style="width: 80px;"></el-input>-->
							<!--                <el-input v-model="widget.props.apiName"  style="width: 80px;"></el-input>-->
							<!--              </el-form-item>-->
							<!--            </el-col>-->

						</el-row>
					</el-form>
				</el-drawer>
			</div>
		</div>
	</template>
</template>
<script>


import DragWidget from "@/views/asset/card/module/widget/widget.vue";
import ExSelect from "@/components/exSelect/index.vue";

export default {
	name: "widgetDrag",
	components: {ExSelect, DragWidget},
	props: {
		model: {type: Object, default: {}},
		widgets: {type: Array, default: []},
		widget: {type: Object, default: null},
	},
	data() {
		return {
			isAlready: false,
			heightReadonly: true,
		}
	},
	created() {

		if (!this.widget.canDrawer) {
			this.widget.canDrawer = true;
		}
		if (!this.widget.props.widgetSize) {
			this.widget.props.widgetSize = "small";
		}
		if (!this.widget.props.colSpan) {
			this.widget.props.colSpan = 8;
		}
		if (!this.widget.props.width) {
			this.widget.props.width = 100;
		}
		if (!this.widget.props.widthUnit) {
			this.widget.props.widthUnit = '%';
		}
		if (!this.widget.props.heightUnit) {
			this.widget.props.heightUnit = 'auto';
		}
		if (!this.widget.props.closeable) {
			this.widget.props.closeable = false;
		}
		if (!this.widget.props.shadow) {
			this.widget.props.shadow = "never";
		}
		if (this.widget.props.border !== 0 && this.widget.props.border !== 1) {
			this.widget.props.border = 0;
		}
		this.heightUnitChange();
		this.widget.props.visible = true;
		this.isAlready = true;
	},
	methods: {
		dblClick: function () {
			this.widget.drawerModel = this.widget.canDrawer;
			this.widget.props.visible = true;
		},
		removeWidget() {
			let filters = this.widgets.filter(item => item.id !== this.widget.id);
			this.widgets.splice(0, this.widgets.length);
			filters.forEach(item => {
				this.widgets.push(item);
			});
		},
		copyWidget() {
			let newWidget = this.$TOOL.objCopy(this.widget);
			newWidget.id = this.$TOOL.uuid("");
			this.widgets.push(newWidget);
		},

		heightUnitChange: function () {
			if (this.widget.props.heightUnit === 'auto') {
				this.widget.props.height = null;
				this.heightReadonly = true;
			} else {
				this.heightReadonly = false;
			}
		},
	}
}
</script>
<script setup>
</script>
